<template>
  <view class="pageIndex">
      <swiper class="banner" circular :indicator-dots="true" indicator-active-color="#C6B6B1">
          <swiper-item>
              <image src="@/static/temp/banner.png" mode="aspectFit"></image>
          </swiper-item>
      </swiper>
      <view class="huiyuanquanyi" :style="{backgroundImage:'url('+$api.imgURL+'vipbg.png)'}">
          <view class="card">
              <view class="title align-center">
                  <image src="@/static/icon/member.png" mode="widthFix"></image>
                  <text>升级会员,享更多权益</text>
              </view>
              <view class="mofang justify-between">
                  <view class="left mof">
                      <image src="@/static/images/mofang-1.png" mode="scaleToFill"></image>
                      <view class="mask"></view>
                      <view class="nei">
                          <view class="ti">金卡会员</view>
                          <view class="des">办理金卡会员0元配镜</view>  
                      </view>
                  </view>  
                  <view class="right">
                      <view class="ro top mof">
                          <image src="@/static/images/mofang-2.png" mode="scaleToFill"></image>
                          <view class="mask"></view>
                          <view class="nei">
                              <view class="ti">分享有礼</view>
                              <view class="des">分享好友 升级战略合伙人 </view>  
                          </view>
                      </view>
                      <view class="ro bottom mof">
                          <image src="@/static/images/mofang-3.png" mode="scaleToFill"></image>
                          <view class="mask"></view>
                          <view class="nei">
                              <view class="ti">新款推荐</view>
                              <view class="des">更多新款 等你来发现</view>  
                          </view>
                      </view>
                  </view>
              </view>
             
          </view>
          <swiper class="banner2" circular :indicator-dots="true" indicator-active-color="#C6B6B1">
              <swiper-item>
                  <image src="@/static/temp/banner2.png" mode="aspectFit"></image>
              </swiper-item>
          </swiper>  
      </view>
      <view class="shops">
          <view class="head justify-between">
              <view class="l">
                  <image src="@/static/icon/shops.png"></image>
                  <text>优选门店</text>
              </view>
              <view class="search align-center">
                  <uni-icons type="search" size="21" color="#ABB0C1"></uni-icons>
                  <input type="text" placeholder="请输入商家名称">
              </view>
          </view>
          <Shops :is_put="true"></Shops>
            
      </view>
      <xui-xtotop ref="xtotop_ref" bgColor="#fff" borColor="#ddd" color="#222"></xui-xtotop>
      <view style="height: 100rpx;"></view>
  </view>

</template>
<script>
import Shops from '../common/shops/index.vue'
export default {
  components:{
      Shops
  },  
  data() {
    return {
      constants: {},
      topstyle:1
    };
  },
  onPageScroll(e) {

  	this.$refs.xtotop_ref.scroll(e);
  },
  methods: {}
};
</script>
<style lang='scss'>
@import '../common/common.scss';
@import './index.scss';
</style>
